<template>
  <el-dialog center title="分配角色" :visible.sync="innerVisible">
    <div class="row">
      <div class="col-xs-12">
        <el-form ref="elForm" class="el-form-col" label-width="120px" :model="model" label-position="left">
          <div class="row">
            <div class="col-xs-12">
              <el-form-item label="角色名称" prop="role" :rules="[
                    {required: true, message: '角色必须', trigger: 'change', type: 'array'}
                  ]">

                <el-select
                  v-model="model.role"
                  filterable
                  remote
                  clearable
                  multiple
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteQuery"
                  :loading="loading">
                  <el-option
                    v-for="item in roleArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="submit" :loading="submitLoading" type="primary">添加</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/base/Pagination'
import Truncate from '@/components/base/Truncate'
import {httpSuccessPost, httpGetResponse} from '@/service/dataService'
import {dotData, copy, confirm} from '@/assets/scripts/base/functions'
import L from 'lodash'
export default {
  components: {
    Pagination,
    Truncate
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      model: {},
      roleArr: [],
      loading: false,
      innerVisible: false,
      submitLoading: false
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
      if (val) {
        if (this.$refs.elForm) {
          this.$refs.elForm.resetFields()
        }
      }
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    remoteMethod: L.debounce((query, _this) => {
      if (!query) {
        _this.loading = false
        return
      }
      httpGetResponse('/ms-user-storage/user/role/role-list', {name: query}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          let data = dotData(response, 'data')
          let tempArr = []
          if (Array.isArray(data)) {
            data.forEach((v, k) => {
              tempArr.push({
                text: v.name,
                value: v.id
              })
            })
          }
          _this.roleArr = tempArr
        }
      }).finally(_ => {
        _this.loading = false
      })
    }, 1000),
    remoteQuery(query) {
      this.cargoOwnerLoading = true
      this.remoteMethod(query, this)
    },
    // 数据发送
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        let data = copy(this.model, true)
        data.userId = this.userId
        this.submitLoading = true
        httpSuccessPost('/ms-user-storage/userRole/insertUserRole', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            confirm('添加成功', undefined, {type: 'success'}).then(_ => {
              this.submitLoading = false
              this.$emit('refresh', true)
              this.innerVisible = false
            })
          } else {
            this.submitLoading = false
          }
        }).catch(_ => {
          this.submitLoading = false
        })
      })
    }
  }
}
</script>
